<template>
    <div class="graduation-results-container">
      <!-- 选择年份 -->
      <el-row class="raduation-results-top">
  
        <el-form :inline="true" ref="form" :model="queryForm">
          <el-form-item label="选择年度" style="width: 400px;">
            <el-select v-model="queryForm.year" placeholder="选择年度">
              <el-option v-for="(item, index) of yearDataOptins" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button  :type="activeBtn == item.id ? 'primary' : ''" v-for="(item, index) of yearDataBtns" :key="index"
               @click="yearDataClick(item, index)">{{ item.name }}</el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </el-row>
  
      <!-- 查询表格 -->
      <el-row class="raduation-results-center">
        <el-col :span="24">
          <div class="raduation-results-title">
            <span>查询表格</span>
          </div>
          <div class="raduation-results-center-gard">
            <div class="raduation-results-center-form">
              <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  
                <el-form-item label="学生姓名">
                  <el-input v-model="searchForm.studentName" placeholder="请输入学生姓名" />
                </el-form-item>
  
                <el-form-item label="专业名称">
                  <el-input v-model="searchForm.majorName" placeholder="请输入专业名称" />
                </el-form-item>
  
                <el-form-item label="论文题目">
                  <el-input v-model="searchForm.majorName" placeholder="请输入论文题目" />
                </el-form-item>
  
                <el-form-item label="关键词">
                  <el-input v-model="searchForm.keyword" placeholder="请输入关键词" />
                </el-form-item>
  
                <el-form-item label="审核状态" style="width: 400px;">
                  <el-select v-model="searchForm.status" placeholder="请选择审核状态">
                    <el-option label="待审核" value="待审核" />
                    <el-option label="通过" value="通过" />
                    <el-option label="拒绝" value="拒绝" />
                  </el-select>
                </el-form-item>
                <!-- <el-form-item>
                            <el-button type="primary" @click="onSearch">查询</el-button>
                          </el-form-item> -->
              </el-form>
            </div>
  
            <div class="raduation-results-center-btn">
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
  
      <!-- table栏 -->
      <el-row class="raduation-results-table">
        <el-table :data="tableData">
          <el-table-column prop="name" align="center" label="学生姓名" />
          <el-table-column prop="status" align="center" label="审核状态" />
          <el-table-column prop="major" align="center" label="专业名称" />
          <el-table-column prop="topic" align="center" label="论文题目" />
          <el-table-column prop="keyword" align="center" label="关键词" />
          <el-table-column prop="teacher" align="center" label="辅导教师" />
          <el-table-column prop="submitTime" align="center" label="填报时间" />
          <el-table-column prop="reviewTime" align="center" label="审核时间" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button  text  @click="handleAction(scope.row)">填报详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
  
      <!-- <el-dialog title="" v-model="dialogVisible" :before-close="handleBeforeClose" >
        <PendingApprovalDialog  v-if="false"/>
        <DraftDialog v-if="false"/>
      </el-dialog> -->
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from 'vue';
  // 待审批弹窗列表
  // import PendingApprovalDialog from './PendingApprovalDialog.vue';
  // import DraftDialog from './DraftDialog.vue'
  
  // 查询年份表单
  const queryForm = reactive({
    year: ''
  })
  
  // 选择年份下拉菜单
  const yearDataOptins = ref([
    {
      label: '2023',
      value: '2023'
    },
    {
      label: '2024',
      value: '2024'
    },
    {
      label: '2025',
      value: '2025'
    }
  ])
  
  // 当前选择年份按钮
  const activeBtn = ref(3)
  
  // 选择年份按钮
  const yearDataBtns = [
    {
      id: 0,
      name: '待审核'
    },
    {
      id: 1,
      name: '通过'
    },
    {
      id: 2,
      name: '拒绝'
    },
    {
      id: 3,
      name: '全部'
    },
  ]
  
  // 选择年份按钮时间
  const yearDataClick = (item, index) => {
    activeBtn.value = index
  }
  
  // 查询表格搜索数据类型声明
  type searchType = {
    studentName: string,
    majorName: string,
    keyword: string,
    status: string
  }
  
  // 查询表格搜索数据
  const searchForm = ref<searchType>({
    studentName: '',
    majorName: '',
    keyword: '',
    status: ''
  });
  
  // table列表数据
  const tableData = ref([
    { name: '张三', status: '待审核', major: '专业名称', topic: '基于......', keyword: '金属工艺', teacher: 'XXX', submitTime: '2021-02-28 10:30', reviewTime: '2021-02-28 10:30' },
    // 更多数据...
  ]);
  
  // 搜索
  const onSearch = () => {
    console.log('搜索条件:', searchForm.value);
    // 在这里添加搜索逻辑
  };
  
  // 重置
  const reset = () => {
    clearForm()
  }
  
  // 清空表单
  const clearForm = () => {
    searchForm.value = {
      studentName: '',
      majorName: '',
      keyword: '',
      status: ''
    }
  }
  
  // 操作详情
  const handleAction = (row) => {
    dialogVisible.value = true
  };
  
  
  
  
  // 控制弹窗
  const dialogVisible = ref(false)
  
  // 弹窗销毁之前
  const handleBeforeClose = ()=>{}
  
  </script>
  
  <style scoped lang="scss">
  .graduation-results-container {
    
    padding: 20px;
    .el-form-item {
      width: 400px;
    }
  
  
    .raduation-results-top {
      padding: 20px 0;
  
  
  
    }
  
    .raduation-results-center {
      .raduation-results-title {
        color: #000;
        font-weight: 500;
        margin-bottom: 10px;
      }
  
      .raduation-results-center-gard {
        display: flex;
      }
  
  
      .raduation-results-center-form {
        flex: 1;
      }
  
  
      .raduation-results-center-btn {
        width: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
  
        &:nth-child(1) {
          margin-bottom: 10px;
        }
  
        .el-button+.el-button {
          margin: 0;
        }
      }
    }
  
  }
  </style>